<template>
  <view class="flex flex-column justify-between">
    <view>
      <view class="mt-20">
        <sub-title class="mt-20" title="基础信息"> </sub-title>
        <OrderBasicDetail :basicData="form" />

        <view class="mt-20">
          <sub-title class="mt-20" title="设备信息"> </sub-title>
          <view class="p-lr-40 mb-20">
            <view class="fz-30 lh-42  mt-20 flex justify-between align-center">
              <text class="fz-32 color-FF6262 w-14">*</text>
              <text class="w-200 color-333333 font-bold">设备名称</text>
              <view class="flex1 text-right color-888888 break-all">
                <text>{{ form.deviceName || '-' }}</text>
              </view>
            </view>
            <view class="fz-30 lh-42 mt-20 flex justify-between align-center">
              <text class="w-200 color-333333 font-bold pl-14">设备编号</text>
              <view class="flex1 text-right color-888888 break-all">
                <text>{{ form.deviceNo || '-' }}</text>
              </view>
            </view>
            <view class="fz-30 lh-42 mt-20 flex justify-between align-center">
              <text class="w-180 color-333333 font-bold pl-14">分组房间</text>
              <view class="flex1 text-right color-888888 break-all">
                <text>{{ form.roomName || '-' }}</text>
              </view>
            </view>
          </view>
          <view class="mt-20">
            <sub-title class="mt-20" title="故障内容"></sub-title>
            <view class="p-lr-40 mb-20">
              <view class="fz-30 lh-42 mt-20">
                <text class="fz-32 color-FF6262 w-14">*</text><text class="w-200 color-333333 font-bold">故障描述</text>
                <view class="break-all mt-10">
                  <text class="color-888888">{{ form.description || '暂无描述' }}</text>
                </view>
              </view>

              <view class="fz-30 lh-42 mt-20 ">
                <text class="w-200 color-333333 font-bold">拍照</text>
                <view class="flex flex-wrap mt-20">
                  <!-- 图片缩略图 -->
                  <view class="relative mr-30" v-for="(item, index) in form.imageList" :key="index">
                    <image class="h-150 w-150" :data-cur="item.url" :src="item.url" @tap="previewImage" />
                  </view>

                  <view v-if="form.imageList.length === 0"
                        class="w-150 h-150 bg-CCCCCC flex flex-column align-center justify-center">
                    <image class="w-47 h-40" src="@/static/images/common/empty.png"></image>
                    <text class="color-fff fz-24 lh-33 mt-10">暂无图片</text>
                  </view>
                </view>
              </view>

              <view class="fz-30 lh-42 mt-20 flex justify-between" >
                <text class="fz-32 color-FF6262 w-14">*</text><text class="w-200 color-333333 font-bold">报修人</text>
                <view class="flex1 flex text-right align-center justify-end color-888888">
                  <text>{{ form.initiator || '-' }}</text>
                </view>
              </view>

              <view class="fz-30 lh-42 mt-20 flex justify-between">
                <text class="w-200 color-333333 font-bold">报修时间</text>
                <view class="flex1 text-right">
                  <text class="color-888888">
                    {{ form.createTime || '-' }}
                  </text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="showOperate" class="h-176 sticky bottom0 bg-fff pl-50 border-top-EEEEEE">
      <view class="flex align-center justify-between pt-30 pb-30">

        <view class="h-60 w-120 br-5 border-2D8CF0 fz-28  lh-60 text-center  mr-50 edit" @tap="edit">
          <text>编辑</text>
        </view>

        <view class="flex">
          <view class="h-60 w-120 br-5 border-2D8CF0 fz-28 color-2D8CF0 lh-60 text-center mr-20" @tap="isRejectModalShow = true">
            <text>拒绝</text>
          </view>
          <view class="h-60 w-120 br-5 border-2D8CF0 fz-28 color-fff lh-60 text-center bg-2D8CF0 mr-50" @tap="receive">
            <text>接单</text>
          </view>
        </view>
      </view>
    </view>
    <!--拒绝模态框-->
    <u-modal v-model="isRejectModalShow" :show-confirm-button="false" :show-title="false" border-radius="20" z-index="10"
             :zoom="false">
      <view class="flex flex-column align-center p-lr-20">
        <view class="border-bottom-CCCCCC w-full text-center lh-116 fz-40 font-bold color-333333">
          <text>拒绝理由</text>
        </view>

        <view class="border-bottom-CCCCCC w-full p-tb-10 pl-20 flex min-h-220">
          <textarea class="flex1 min-h-200 color-000000" v-model="rejectForm.reason" auto-height placeholder="请输入拒绝理由" placeholder-style="color:#CCCCCC;font-size:30rpx" maxlength="200" :show-confirm-bar="false" />
        </view>

        <view class="flex align-center justify-center mb-40 mt-40">
          <view class="border-2D8CF0 w-120 h-60 border-box color-2D8CF0 fz-28 text-center lh-60 br-5 mr-50"
                @tap="isRejectModalShow = false">
            <text>取消</text>
          </view>
          <view class="bg-2D8CF0 w-120 h-60 color-fff fz-28 text-center lh-60 br-5" @tap="confirmReject">
            <text>提交</text>
          </view>
        </view>
      </view>
    </u-modal>

    <!-- 数据未填提示 -->
    <u-modal border-radius="20" :show-confirm-button="false" :show-title="false" mask-close-able v-model="errorShow">
      <view class="h-150 font-bold flex align-center justify-center" >
        <image class="mr-20 w-38 h-38" src="@/static/images/mine/error.png"></image>
        <view class="fz-30 color-333333 err-text">工单信息不完整，请通过编辑补充</view>
      </view>
    </u-modal>

  </view>
</template>

<script>
import SubTitle from "@/components/SubTitle/SubTitle";
import OrderBasicDetail from "../order-basic-detail.vue";

import {workOrderDetail, workOrderRefuse} from '@/api/repair/workOrder'

export default {
  name: "RepairWorkOrderToAcceptInfo",
  components: {SubTitle , OrderBasicDetail},
  props: {
    workOrderId: {
      type: String,
      required: true
    },
    showOperate: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      loading: false,
      form: {},
      // 拒绝提示弹框
      isRejectModalShow: false,
      // 拒绝表单
      rejectForm: {
        workOrderId: '',
        reason: ''
      },
      errorShow:false,
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.resetForm()
      this.resetRejectForm()
      this.getDetail()
    },
    getDetail() {
      this.loading = true
      return workOrderDetail(this.workOrderId).then(res => {
        this.form = res.data
        this.loading = false
        return Promise.resolve(res)
      })
    },
    resetForm() {
      this.form = {
        companyId: "",
        companyName: "",
        content: null,
        createTime: "",
        departmentId: "",
        departmentName: "",
        description: "",
        deviceId: "",
        deviceName: "",
        deviceNo: "",
        endTime: null,
        handbook: null,
        hospitalId: "",
        hospitalName: "",
        imageList: [],
        initiator: "",
        initiatorUserId: "",
        recordId: null,
        recordImageList: null,
        recordPartList: null,
        repairStaff: null,
        responsibleStaff: null,
        responsibleStaffIds: null,
        roomName: "",
        staffIds: null,
        startTime: null,
        status: "0",
        workOrderId: this.workOrderId
      }
    },
    resetRejectForm() {
      this.rejectForm = {
        workOrderId: this.workOrderId,
        reason: ''
      }
    },
    // 点击预览
    previewImage (e) {
      const current = e.currentTarget.dataset.cur;
      const urls = this.form.imageList.map(el => el.url);
      uni.previewImage({
        current: current,
        urls: urls, //需要预览的图片链接列表
        indicator: "none", //图片指示器样式 "default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器
      });
    },
    edit() {
      this.$emit('edit')
    },
    // 确认拒绝
    confirmReject() {
      workOrderRefuse(this.rejectForm).then(() => {
        this.isRejectModalShow = false
        this.resetRejectForm()
        this.goBack()
      })
    },
    //返回到维修列表
    goBack(){
      this.$store.commit('SET_TABSCURRENT', 0)
      this.$store.commit('SET_TABSCURRENTNAME', '待分配')
      this.$tab.switchTab('/pages/tabbar/repair/repair')
    },
    //接单-路由跳转
    receive() {
      const form = this.form
      if(form.hospitalId && form.companyId && form.departmentId && form.deviceName && form.description && form.description.length>0){
        this.$tab.navigateTo(`/pages/repair/receive-order?workOrderId=${ this.form.workOrderId }&companyId=${this.form.companyId}&hospitalId=${this.form.hospitalId}&isTransfer=${false}`)
      }else{
        this.errorShow = true
      }
    },
  }
}
</script>

<style lang="scss">
.edit {
  background: rgba(45, 140, 240, 0.1);
  border-radius: 5rpx;
  opacity: 1;
  border: 1rpx solid #2D8CF0;
  color: #2D8CF0;
}

/deep/.u-tab-bar {
  bottom: -10rpx !important;
  z-index: 9;
}

/deep/ .u-collapse-head {
  margin-bottom: 0 !important;
  border-bottom: 1px solid #ccc;
  padding: 0 !important;
  padding-bottom: 30rpx !important;
  padding-top: 20rpx !important;
}
</style>
